{% extends '::base.html.twig' %}

{% block title %}{% trans %}Sign up{% endtrans %}{% endblock %}

{% block body %}
<div class="row-fluid whiteWrapper">

    <form class="form-horizontal signUpForm" action="{{ path('user_signup') }}" method="post">

        {% for formError in form.vars.errors %}
        <div class="alert-error alert">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {{ formError.message }}
        </div>
        {% endfor %}

        <fieldset>
            <legend>{% trans %}Sign Up{% endtrans %}</legend>
            <hr class="smallHr" />
            <div class="control-group">
                <label class="control-label">{% trans %}Login Name{% endtrans %}</label>
                <div class="controls">
                    {{ form_widget(form.loginName, {'attr': {'class': 'input-xlarge', 'placeholder': 'Username' | trans} }) }}
                </div>
            </div>
            {% for formError in form.loginName.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}
             <div class="control-group">
                <label class="control-label"{% trans %}>Email{% endtrans %}</label>
                <div class="controls">
                    {{ form_widget(form.email, {'attr': {'class': 'input-xlarge', 'placeholder': 'Ex. abc@domain.com' | trans} }) }}
                </div>
            </div>
            {% for formError in form.email.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}
            <div class="control-group">
                <label class="control-label">{% trans %}Password{% endtrans %}</label>
                <div class="controls">
                    {{ form_widget(form.userPassword.first, {'attr': {'class': 'input-xlarge', 'placeholder': 'Password' | trans} }) }}
                </div>
            </div>
            {% for formError in form.userPassword.first.vars.errors %}
            <div class="control-group">
                <div class="alert-error alert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ formError.message }}
                </div>
            </div>
            {% endfor %}
            <div class="control-group">
                <label class="control-label">{% trans %}Confirm Password{% endtrans %}</label>
                <div class="controls">
                    {{ form_widget(form.userPassword.second, {'attr': {'class': 'input-xlarge', 'placeholder': 'Confirm Password' | trans} }) }}
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">&nbsp;</label>
                <div class="controls">
                    {{ form_rest(form) }}
                    <button class="btn blue submit loginBtn" type="submit">{% trans %}Sign Up{% endtrans %}</button>
                </div>
            </div>

        </fieldset>
    </form>
</div>
{% endblock %}